{% if categories %}
    <nav id="menu" class="navbar">
        <div class="container">
            <div class="row no-gutters">
                <div class="navbar-header visible-xs visible-sm">
                    <button type="button" class="btn btn-primary mobile-search"><i class="fa fa-search"></i></button>
                    <button type="button" class="btn btn-navbar mobile-nav-icon"><i class="fa fa-bars"></i></button>
                </div>
                <div class="side-menu">
                    <div class="side-inner">
                        <div id="search" class="input-group hidden-lg hidden-md">
                            <input type="text" name="search" value="{{ search }}" placeholder="{{ text_search }}"
                                   class="form-control"/>
                            <button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button>
                        </div>
                        <div class="side-title hidden-lg hidden-md">{{ text_category }}</div>
                        {#<ul class="nav navbar-nav">#}
                            {#<li class="dropdown">#}
                                {#<a href="/">{{ text_index }}</a>#}
                            {#</li>#}
                            {#{% for category in categories %}#}
                                {#{% if category.children %}#}
                                    {#<li class="dropdown">#}
                                        {#<span class="toggle-button"><i class="fa fa-caret-down" aria-hidden="true"></i></span>#}
                                        {#<a href="{{ category.href }}">{{ category.name }}</a>#}
                                        {#<ul class="dropdown-menu">#}
                                            {#{% for child in category.children %}#}
                                                {#<li><a href="{{ child.href }}">{{ child.name }}</a></li>#}
                                            {#{% endfor %}#}
                                        {#</ul>#}
                                    {#</li>#}
                                {#{% else %}#}
                                    {#<li><a href="{{ category.href }}">{{ category.name }}</a></li>#}
                                {#{% endif %}#}
                            {#{% endfor %}#}
                        {#</ul>#}


                        <ul class="navigation clearfix">
                            <li class="navigation-dropdown">
                                <a href="/">{{ text_index }}</a>
                            </li>
                            {% for category in categories %}
                                {% if category.children %}
                                    <li class="navigation-dropdown">
                                        <a href="{{ category.href }}">{{ category.name }}</a>
                                        <span class="toggle-button"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
                                        <div class="navigation-dropdown-panel  {{  loop.first ? 'active' : '' }}">
                                            {#begin: 儿子#}
                                            <div class="children">
                                                <div class="container">
                                                    {% for child in category.children %}
                                                        <h4 class="children-name"><a href="{{ child.href }}">{{ child.name }}</a></h4>
                                                        {#beigin: 孙子#}
                                                        <p class="children-grandchild">
                                                            {% for grandchild in child.children %}
                                                                <a href="{{ grandchild.href }}">{{ grandchild.name }}</a>
                                                            {%  endfor %}
                                                        </p>
                                                        {#end: 孙子#}
                                                    {% endfor %}
                                                </div>
                                            </div>
                                            {#end: 孙子#}
                                        </div>
                                    </li>
                                {% else %}
                                    <li class="navigation-dropdown"><a href="{{ category.href }}">{{ category.name }}</a></li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>
{% endif %}

